<template>
	<view class="social-item-box">
		<view class="user-info-box">
			<view class="avatar-box" @click="jumpToUserInfo()">
				<image class="avatar-img" :src="dynamic.avatar"></image>
				<image class="sex-img" :src="dynamic.sex === 0 ? '/static/portraitTagGirl-s.png' : '/static/portraitTagBoy-s.png'"></image>
			</view>
			<view class="user-info">
				<text class="name-text">{{ dynamic.nickName }}</text>
				<text class="other-text">{{ getTimeDiff(dynamic.createTime) }} {{ dynamic.place }}</text>
			</view>
			<view class="chat-button" v-if="userInfo.id !== dynamic.userId" @click="(type || dynamic.follow) ? chat() : followUser()">{{ (type === 1 || dynamic.follow) ? '私聊' : '关注' }}</view>
		</view>
		<view class="dynamic-content-box" @click="dynamicDetail(dynamic)">
			<text class="content-text">{{ dynamic.content ? dynamic.content : '' }}</text>
			<social-img-view :imgs="dynamic.images" v-if="dynamic.images"></social-img-view>
		</view>
		<view class="control-box">
			<view class="control-item" @click="likeDynamic()">
				<image class="control-like-img" :src="dynamic.click ? '/static/feellLiked.png' : '/static/feelLike.png'"></image>
				<text class="item-text">{{ dynamic.clicks ? dynamic.clicks : 0 }}</text>
			</view>
			<view class="control-item">
				<image class="control-comment-img" src="/static/feelComment.png"></image>
				<text class="item-text">{{ dynamic.comments ? dynamic.comments : 0 }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import socialImgView from './socialImgView.vue'
	
	export default {
		name:"socialItem",
		components: {
			socialImgView
		},
		data() {
			return {
				userInfo: {}
			};
		},
		mounted() {
			this.userInfo = this.$userInfo;
		},
		props: {
			dynamic: {},
			type: Number
		},
		methods: {
			jumpToUserInfo() {
				uni.navigateTo({
					url: '/pages/userDetai?userId=' + this.dynamic.userId
				})
			},
			dynamicDetail(dynamic) {
				uni.navigateTo({
					url: '/pages/dynamicDetail'
				})
				uni.$emit('dynamicDetail', dynamic);
			},
			followUser() {
				const params = {
					userId: this.dynamic.userId,
					status: 1
				}
				this.$apis.followUser(params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '关注成功!',
							icon: 'success'
						});
						uni.$emit('followUser', this.dynamic);
					}
				})
			},
			chat() {
				
			},
			getTimeDiff(startTime) {
				var new_date = new Date();
				var old_date = new Date(startTime);
				var diffMinutes = parseInt((new_date - old_date) / 1000 / 60);
				var hours = parseInt(diffMinutes / 60);
				var days = parseInt(diffMinutes / 60 / 24);
				var month = parseInt(diffMinutes / 60 / 24 / 31);
				var year = parseInt(diffMinutes / 60 / 24 / 31 / 12);
				let timeStr = diffMinutes + '分钟前';
				if (hours > 0) {
					timeStr = hours + '小时前';
				}
				if (days > 0) {
					timeStr = days + '天前';
				}
				if (month > 0) {
					timeStr = month + '个月前';
				}
				if (year > 0) {
					timeStr = yesr + '年前';
				}
				return timeStr;
			},
			likeDynamic() {
				const params = {
					entityType: 1,
					entityId: this.dynamic.id
				}
				console.log(params);
				this.$apis.click(params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: this.dynamic.click ? '取消成功!' : '感谢您的点赞!',
							icon: 'success'
						})
						uni.$emit('dynamicClick', this.dynamic);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.social-item-box {
		width: calc(100vw - 96rpx);
		padding: 30rpx 48rpx 30rpx 48rpx;
		
		.user-info-box {
			display: flex;
			align-items: center;
			
			.avatar-box {
				width: 80rpx;
				height: 80rpx;
				position: relative;
				
				.avatar-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}
				
				.sex-img {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
			
			.user-info {
				width: 400rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0 32rpx 0 30rpx;
				
				.name-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #222222;
				}
				
				.other-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			
			.chat-button {
				width: 112rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid #F0F3F6;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				text-align: center;
				line-height: 64rpx;
			}
		}
		
		.dynamic-content-box {
			width: 100%;
			margin-top: 32rpx;
			
			.content-text {
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				color: #222222;
				line-height: 44rpx;
			}
		}
		
		.control-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100vw - 96rpx);
			margin-top: 20rpx;
			
			.control-item {
				width: 300rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.control-share-img {
					width: 32rpx;
					height: 32rpx;
				}
				
				.control-like-img {
					width: 32rpx;
					height: 30rpx;
				}
				
				.control-comment-img {
					width: 32rpx;
					height: 32rpx;
				}
				
				.item-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					margin-left: 24rpx;
				}
			}
		}
	}
</style>